/*less mixins*/
.animation(@name, @duration: 300ms, @ease: ease, @delay: 0s, @repeat: infinite) {
	animation: @name @duration  @ease @delay @repeat;
	-webkit-animation: @name @duration  @ease @delay @repeat;
	-moz-animation: @name @duration  @ease @delay @repeat;
	-ms-animation: @name @duration  @ease @delay @repeat;
	-o-animation: @name @duration  @ease @delay @repeat;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.transform(@function) {
	-webkit-transform: @function;
	-moz-transform: @function;
	-ms-transform: @function;
	-o-transform: @function;
}

/* Game roll */

.game-roll {
	width: 128px;
	height: 383px;
	position: absolute;
	top: 81px;
	overflow: hidden;
}

.game-roll-spinning {
	background: url('../images/game_ims_reels_blurred.png') no-repeat left top;
}

.game-roll-spinning .game-roll-box {
    .animation(game-roll-start-jump, 250ms, ease, 0s, 1);
	/*display: none;*/
}

.game-roll-0 {
	left: 61px;
}

.game-roll-1 {
	left: 200px;
}

.game-roll-2 {
	left: 337px;
}

.game-roll-3 {
	left: 475px;
}

.game-roll-4 {
	left: 613px;
}

.game-roll-box {
	position: absolute;
	top: 0;
	.transform(translateY(-128px));
}

.game-roll-spinning-start {
	.animation(game-roll-spin, 1s, step-start, 250ms, infinite);
	background: url(../images/game_ims_reels_blurred.png) 0 0;
}

/* Animation keyframes */

/* #region game-roll-spin */
@keyframes game-roll-spin
{
	0%   {background-position: 0 0;}
	8%   {background-position: 127px 0;}
	16%   {background-position:254px 0;}
	24%   {background-position:381px 0;}
	32%   {background-position:508px 0;}
	40%   {background-position:635px 0;}
	48%   {background-position:762px 0;}
	56%   {background-position:889px 0;}
	64%   {background-position:1016px 0;}
	72%   {background-position:1143px 0;}
	80%   {background-position:1270px 0;}
	88%   {background-position:1397px 0;}
	92%   {background-position:1524px 0;}
	100%   {background-position: 1651px 0;}
}

@-webkit-keyframes game-roll-spin
{
	0%   {background-position: 0 0;}
	8%   {background-position: 127px 0;}
	16%   {background-position:254px 0;}
	24%   {background-position:381px 0;}
	32%   {background-position:508px 0;}
	40%   {background-position:635px 0;}
	48%   {background-position:762px 0;}
	56%   {background-position:889px 0;}
	64%   {background-position:1016px 0;}
	72%   {background-position:1143px 0;}
	80%   {background-position:1270px 0;}
	88%   {background-position:1397px 0;}
	92%   {background-position:1524px 0;}
	100%   {background-position: 1651px 0;}
}

@-moz-keyframes game-roll-spin
{
	0%   {background-position: 0 0;}
	8%   {background-position: 127px 0;}
	16%   {background-position:254px 0;}
	24%   {background-position:381px 0;}
	32%   {background-position:508px 0;}
	40%   {background-position:635px 0;}
	48%   {background-position:762px 0;}
	56%   {background-position:889px 0;}
	64%   {background-position:1016px 0;}
	72%   {background-position:1143px 0;}
	80%   {background-position:1270px 0;}
	88%   {background-position:1397px 0;}
	92%   {background-position:1524px 0;}
	100%   {background-position: 1651px 0;}
}

@-o-keyframes game-roll-spin
{
	0%   {background-position: 0 0;}
	8%   {background-position: 127px 0;}
	16%   {background-position:254px 0;}
	24%   {background-position:381px 0;}
	32%   {background-position:508px 0;}
	40%   {background-position:635px 0;}
	48%   {background-position:762px 0;}
	56%   {background-position:889px 0;}
	64%   {background-position:1016px 0;}
	72%   {background-position:1143px 0;}
	80%   {background-position:1270px 0;}
	88%   {background-position:1397px 0;}
	92%   {background-position:1524px 0;}
	100%   {background-position: 1651px 0;}
}

@-ms-keyframes game-roll-spin
{
	0%   {background-position: 0 0;}
	8%   {background-position: 127px 0;}
	16%   {background-position:254px 0;}
	24%   {background-position:381px 0;}
	32%   {background-position:508px 0;}
	40%   {background-position:635px 0;}
	48%   {background-position:762px 0;}
	56%   {background-position:889px 0;}
	64%   {background-position:1016px 0;}
	72%   {background-position:1143px 0;}
	80%   {background-position:1270px 0;}
	88%   {background-position:1397px 0;}
	92%   {background-position:1524px 0;}
	100%   {background-position: 1651px 0;}
}

/* #endregion */

/*  #region game-roll-start-jump */
@keyframes game-roll-start-jump
{
0%   {.transform(translateY(-128px)); opacity:1;}
90%  {.transform(translateY(-248px)); opacity:1;}
/*99%  {.transform(translateY(-228px)); opacity:1;}*/
100%  {.transform(translateY(-228px)); opacity:0;}
}

@-webkit-keyframes game-roll-start-jump
{
	0%   {.transform(translateY(-128px)); opacity:1;}
	90%  {.transform(translateY(-248px)); opacity:1;}
	99%  {.transform(translateY(-228px)); opacity:1;}
	100%  {.transform(translateY(-228px)); opacity:0;}
}
@-moz-keyframes game-roll-start-jump
{
0%   {.transform(translateY(-128px)); opacity:1;}
90%  {.transform(translateY(-248px)); opacity:1;}
99%  {.transform(translateY(-228px)); opacity:1;}
100%  {.transform(translateY(-228px)); opacity:0;}
}
@-o-keyframes game-roll-start-jump
{
0%   {.transform(translateY(-128px)); opacity:1;}
90%  {.transform(translateY(-248px)); opacity:1;}
99%  {.transform(translateY(-228px)); opacity:1;}
100%  {.transform(translateY(-228px)); opacity:0;}
}
@-ms-keyframes game-roll-start-jump
{
0%   {.transform(translateY(-128px)); opacity:1;}
90%  {.transform(translateY(-248px)); opacity:1;}
99%  {.transform(translateY(-228px)); opacity:1;}
100%  {.transform(translateY(-228px)); opacity:0;}
}
/* #endregion */